<template>
    <view class="Wrapper" :class="{ bgf4f5: chatHomeList.length }">
        <navBar :title="title" v-if="noHome"></navBar>
        <home-bar v-else />

        <optionModule :chatBoxHeight="chatBoxHeight" :intents="intents" />
        <scroll-view
            scroll-y="true"
            class="scrollView"
            enable-back-to-top
            :scroll-top="scrollTop"
            :scroll-into-view="scrollintoview"
            :style="scrollHeight">
            <renewTips :pageData="frequency"></renewTips>
            <template v-for="(item, index) in chatHomeList" :key="index">
                <!-- ai -->
                <view class="List Left" :id="`chat${index}`" v-if="item.state == 1">
                    <view class="HeadBox">
                        <image
                            :src="imgUrls(mainStore.BaseInfo.chatImg)"
                            mode="aspectFill"
                            class="Headimgs"></image>
                        <view class="d-flex a-center p-top10" v-if="item.isshow">
                            <text class="tipTxt">静音</text>
                            <image
                                :src="staticImg('icon_sound@2x.png')"
                                mode="aspectFill"
                                class="soundImg"></image>
                        </view>
                    </view>
                    <view
                        class="content"
                        v-if="
                            (item.type == 1 && !item.pdfUrl) ||
                            item.type == 3 ||
                            item.type == 603 ||
                            item.type == 666
                        ">
                        <view class="content_text">
                            <view class="answer" v-if="item.answer">
                                <mp-html :content="item.answer" :markdown="true" />
                            </view>

                            <!-- 单选 -->
                            <template v-if="item.type == 1">
                                <view
                                    class="single_choice"
                                    v-for="(sub, subIn) in item.recommend"
                                    :key="subIn"
                                    @click.stop="single_choice(item, sub, index)"
                                    >{{ sub.index }}.{{ sub.question }}
                                </view>
                            </template>
                            <!-- 多选 -->
                            <view class="rows" v-if="item.type == 3">
                                <up-checkbox-group
                                    v-model="checkboxValue1"
                                    placement="column"
                                    @change="checkboxChange">
                                    <view
                                        class="Multiple_choice"
                                        :class="{ Nochoice: !item.allowclick }"
                                        v-for="(sub, subIn) in item.recommend">
                                        <up-checkbox
                                            :customStyle="{ marginBottom: '8px' }"
                                            :key="subIn"
                                            size="14"
                                            labelSize="13"
                                            iconSize="10"
                                            :labelColor="mainStore.color"
                                            :label="`${sub.index}.${sub.question}`"
                                            :name="sub.question">
                                        </up-checkbox>
                                    </view>
                                </up-checkbox-group>
                                <view
                                    class="configBtn"
                                    :class="{ active: checkboxValue1.length }"
                                    v-if="item.allowclick"
                                    @click="configMultiple(item)"
                                    >确定</view
                                >
                            </view>
                            <!-- 选择律师 -->
                            <view class="Findlawyer" v-if="item.type == 603">
                                <block v-for="(sub, subIndex) in item.lawyers" :key="sub.userId">
                                    <view
                                        class="list"
                                        @click="Togglelawyer(item, sub)"
                                        :class="{ Active: item.selectUserId == sub.userId }">
                                        <image
                                            :src="imgUrls(sub.avatar)"
                                            mode="aspectFill"
                                            class="headImg"
                                            @click.stop="
                                                toUrl(`/pages/counselors/details?id=${sub.id}`)
                                            "></image>
                                        <view class="content">
                                            <text class="Name">{{ sub.realName }}</text>
                                            <text class="desc">律师</text>
                                        </view>
                                        <view class="seleBox">
                                            <view class="iconfont icon-xuanzhong"></view>
                                        </view>
                                    </view>
                                </block>
                                <view
                                    class="configBtn"
                                    :class="{ active: item.selectUserId }"
                                    @click="Choicelawyer(item)"
                                    v-if="!item.orgQuestion"
                                    >选择</view
                                >
                            </view>

                            <!-- 选择合同起草 -->
                            <view class="Findlawyer Drawup" v-if="item.type == 666">
                                <block v-for="(sub, subIndex) in item.lawyers" :key="sub.index">
                                    <view
                                        class="list"
                                        @click="ToggleDrawup(item, sub)"
                                        :class="{ Active: item.selectUserId == sub.index }">
                                        <view class="content">
                                            <text class="Name size28 ellipsis_1">{{
                                                sub.title
                                            }}</text>
                                        </view>
                                        <view class="seleBox">
                                            <view class="iconfont icon-xuanzhong"></view>
                                        </view>
                                    </view>
                                </block>
                                <view
                                    class="configBtn"
                                    :class="{ active: item.selectUserId }"
                                    @click="ChoiceDrawup(item)"
                                    v-if="!item.orgQuestion"
                                    >选择</view
                                >
                            </view>
                        </view>
                    </view>

                    <view class="content d-flex a-start" v-else-if="item.type == 1 && item.pdfUrl">
                        <view class="paper" @click="previewFile(item.pdfUrl)">
                            <image
                                :src="staticImg(getFileExtension(item.pdfUrl))"
                                mode="aspectFill"
                                class="fileImg">
                            </image>
                            <text class="fileName">生成意见书</text>
                        </view>
                    </view>

                    <view class="content" v-else>
                        <view class="content_text bgFa">
                            <view class="answer" v-if="item.answer">
                                <mp-html :content="item.answer" :markdown="true" />
                            </view>
                        </view>
                        <!-- 跳转 -->
                        <view class="skip" v-if="item.type == 601" @click="skipUrl(item)">
                            <text class="nameTitle">{{ item.tourlDescription }}</text>
                            <view class="iconfont icon-xiangyou color-999 size44"></view>
                        </view>
                    </view>
                </view>

                <!-- 用户 -->
                <view class="List Right" :id="`chat${index}`" v-if="item.state == 2">
                    <view class="content">
                        <view class="content_text">{{ item.question }}</view>
                        <view class="Edit_error" v-if="item.isshow">
                            <text class="discern">识别错误？</text>
                            <text class="Edit" @click.stop="Editpop(index)">修改</text>
                        </view>
                    </view>
                    <view class="HeadBox">
                        <image
                            :src="imgUrls(mainStore.userInfo.avatar)"
                            mode="aspectFill"
                            class="Headimgs"></image>
                    </view>
                </view>
            </template>

            <defaultNiu v-if="!chatHomeList.length"></defaultNiu>
            <!-- <chat :chatHomeList="chatHomeList" @sendContent="sendContent"></chat>
			<view style="height: 20px;"></view> -->
        </scroll-view>
        <view class="bottomChat" :style="chatBoxStyle">
            <view class="chatBot">
                <view class="chatBor">
                    <input
                        class="textarea"
                        type="text"
                        placeholder="请输入想要问的问题"
                        placeholder-class="place"
                        :adjust-position="false"
                        confirm-type="send"
                        :focus="false"
                        :disabled="disabled"
                        v-model="inputValue"
                        @focus="handleFocus"
                        @blur="handleBlur"
                        @confirm="Send" />
                    <image
                        :src="staticImg('FS.png')"
                        mode="aspectFit"
                        class="send"
                        @click="Send"></image>
                </view>
            </view>
        </view>
    </view>

    <up-datetime-picker
        ref="datetimePickerRef"
        :show="show"
        v-model="value1"
        :minDate="minDate"
        :maxDate="Date.now()"
        mode="date"
        :formatter="formatter"
        @cancel="cancelDate(5)"
        @confirm="confirmDate">
    </up-datetime-picker>
    <cityPicker
        :column="3"
        :default-value="defaultValue"
        :mask-close-able="true"
        @cancel="cancelDate(6)"
        @confirm="confirmCity"
        :visible="visible" />

    <movableArea v-if="!noHome"></movableArea>
    <newChat @newChat="newChatBtn" :pageData="chatHomeList" v-if="!noHome"></newChat>
    <transact :mealData="frequency"></transact>
</template>

<script setup>
    import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
    import HomeBar from '@/components/Home/homeBar.vue';
    import chat from '@/components/Home/chat.vue';
    import defaultNiu from '@/components/Home/defaultNiu.vue';
    import optionModule from '@/components/Home/optionModule.vue';
    import movableArea from '@/components/Home/movableArea.vue';
    import newChat from '@/components/Home/newChat.vue';

    import transact from '@/components/Home/transact.vue';
    import renewTips from '@/components/Home/renewTips.vue';
    import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
    import {
        toUrl,
        toLogin,
        Toast,
        formatter,
        tampToDate,
        staticImg,
        imgUrls,
        showLoading,
        hideLoading,
        toRect,
        toPage,
        getFileExtension,
        previewFile,
    } from '@/utils/utils.js';
    import { domain, wssUrl } from '@/utils/config.js';
    import { getopendId } from '@/utils/api.js';
    import Http from '@/utils/request.js';
    import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
    import { onLoad, onShow, onReady, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    import { useMainStore } from '@/stores/index';

    const mainStore = useMainStore();
    const title = ref('');
    const noHome = ref(false);
    const frequency = ref('');
    const intents = ref([]);
    const scrollTop = ref(0);
    const scrollintoview = ref('');
    const chatBoxHeight = ref(0);

    const isKeyboardShow = ref(false);

    const ishistory = ref(false);
    const isFocusing = ref(false);

    const show = ref(false);
    const minDate = ref(-1234559422934);
    const value1 = ref(Date.now());
    const datetimePickerRef = ref(null);

    const defaultValue = ref('500103');
    const visible = ref(false);
    const chatHomeList = ref([]);

    headImgs: 'https://daniu.zerosea.cn/frontrerouces/default/default_img.png';

    const checkboxValue1 = ref([]); // 多选
    const inputValue = ref(''); //输入内容
    const competencyType = ref(0);
    const id = ref('');
    const entranceId = ref('');
    const chooseType = ref(true);
    const chatId = ref(''); // 流式
    const disabled = ref(false);

    const chat_Id = ref(''); // 历史记录id
    const page = ref(1);
    const limit = ref(100);
    const getMore = ref(true);

    onLoad((opt) => {
        if (opt.competencyType) competencyType.value = opt.competencyType;
        console.log(opt, 'opt');
        // toUrl(`/pages/chat/chat?chatId=6`);
        if (opt.chat_Id) {
            chat_Id.value = opt.chat_Id;
            title.value = '会话记录';
            noHome.value = true;
            getChatMessge();
        } else if (opt.question) {
            inputValue.value = opt.question;
            title.value = '合同起草';
            noHome.value = true;
            chooseType.value = false;
            Send();
        } else {
            getopendId();
        }
        if (opt.Type) toPage(opt);
    });

    onShow(() => {
        let options = wx.getEnterOptionsSync();
        if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
            let extraData = options.referrerInfo.extraData;
            if (!extraData) return;
            if (extraData.code == 'success') {
                frequency.value = '';
                handleBlur();
                return;
            }
        }

        setTimeout(() => {
            datetimePickerRef.value.setFormatter(formatter);
            updateChatBoxHeight();

            // 统一处理键盘事件监听
            try {
                // 先移除可能存在的监听器
                uni.offKeyboardHeightChange();
                // 重新注册监听器
                uni.onKeyboardHeightChange((res) => {
                    nextTick(() => {
                        mainStore.keyBoardHeight = res.height;

                        updateChatBoxHeight();
                        if (res.height > 0) {
                            scrollToBottom();
                        }
                    });
                });
            } catch (error) {
                console.log('键盘监听异常：', error);
            }

            nextTick(() => {
                scrollToBottom(1000);
            });
        }, 200);
    });

    // onReady(() => {
    //     datetimePickerRef.value.setFormatter(formatter);
    //     updateChatBoxHeight();

    //     // 统一处理键盘事件监听
    //     try {
    //         // 先移除可能存在的监听器
    //         uni.offKeyboardHeightChange();
    //         // 重新注册监听器
    //         uni.onKeyboardHeightChange((res) => {
    //             nextTick(() => {
    //                 mainStore.keyBoardHeight = res.height;
    //                 console.log(res.height, 'res.height');
    //                 updateChatBoxHeight();
    //                 if (res.height > 0) {
    //                     scrollToBottom();
    //                 }
    //             });
    //         });
    //     } catch (error) {
    //         console.log('键盘监听异常：', error);
    //     }

    //     nextTick(() => {
    //         scrollToBottom(1000);
    //     });
    // });

    // 新建聊天
    const newChatBtn = () => {
        chatHomeList.value = [];
        inputValue.value = '';
        id.value = '';
        entranceId.value = '';
        chatId.value = '';
        chooseType.value = true;
        competencyType.value = 0;
        intents.value = '';
    };
    const getChatMessge = () => {
        Http.get({
            url: '/api/ai/getChatMessge',
            data: {
                page: page.value,
                limit: limit.value,
                chatId: chat_Id.value,
            },
        }).then((res) => {
            if (res.code != 0) return Toast(res.msg);
            const result = res.rows || [];
            result.forEach((item) => {
                if (item.type == 1) {
                    item.recommend ? (item.recommend = JSON.parse(item.recommend)) : [];
                }
                if (item.type == 603) {
                    item.lawyers ? (item.lawyers = JSON.parse(item.lawyers)) : [];
                    item.answer = '选择律师';
                }
                // 起草合同
                if (item.type == '666') {
                    item.lawyers = JSON.parse(item.lawyers);
                    item.answer = item.answer ? item.answer : '选择合同起草';
                    item.selectUserId = '';
                }
                item.isshow = false;
                if (item.state == 1) item.allowclick = true;
            });
            if (page.value == 1) {
                const paramsBox = result[result.length - 1];
                if (paramsBox.chatId) chatId.value = paramsBox.chatId;
                if (paramsBox.sessionId) id.value = paramsBox.sessionId;
                chooseType.value = paramsBox.type == 2 ? false : true;
            }

            page.value == 1 && !chatHomeList.value.length
                ? (chatHomeList.value = result)
                : chatHomeList.value.unshift(result);
            if (result.length < limit.value) getMore.value = false;
            console.log(chatHomeList.value, 'chatHomeList.value');
        });
    };

    const Send = () => {
        if (!mainStore.token) return toLogin();
        if (!inputValue.value.trim() && !id.value) return;

        let ObjAi = {
            allowclick: true, // 是否点击
            isshow: false,
            state: 1,
        };
        let Objme = {
            question: inputValue.value,
            isshow: false,
            state: 2,
        };
        if (inputValue.value) chatHomeList.value.push(Objme);
        showLoading();
        Http.post({
            url: '/api/ai/askLargeModel',
            data: {
                question: inputValue.value,
                competencyType: competencyType.value,
                id: id.value,
                entranceId: entranceId.value,
                chooseType: chooseType.value,
                chatId: chatId.value,
            },
        }).then((res) => {
            hideLoading();
            if (res.code != 0) return Toast(res.msg);
            const result = res.data;
            entranceId.value = result.entranceId ? result.entranceId : '';
            id.value = result.id ? result.id : '';
            chatId.value = result.chatId || '';
            chooseType.value = result.chooseType;
            competencyType.value = result.competencyType ? result.competencyType : 0;
            if (result.intents) intents.value = result.intents;
            if (result.competencyType == 4) return askLargeModelStream(inputValue.value);
            inputValue.value = '';
            if (result.pdfUrl) {
                let pdfUrl = encodeURIComponent(result.pdfUrl);

                toRect(`/pages/lookFile/lookFile?fileurl=${pdfUrl}`);
                return;
            }

            // 找律师
            if (result.type == '603') {
                result.lawyers = JSON.parse(result.lawyers);
                result.answer = result.answer ? result.answer : '选择律师';
                result.selectUserId = '';
            }
            // 起草合同
            if (result.type == '666') {
                result.lawyers = JSON.parse(result.lawyers);
                result.answer = result.answer ? result.answer : '选择合同起草';
                result.selectUserId = '';
            }
            // 提醒次数
            if (result.memberTypeTitle && result.systemMsg) frequency.value = result;

            ObjAi = {
                ...ObjAi,
                ...result,
            };
            console.log(ObjAi, 'ObjAi');
            if (result.answer) chatHomeList.value.push(ObjAi);

            if (result.reporting == 1) {
                inputValue.value = '';
                Send();
                return;
            }
            if (!result.type) return;
            resultType(result);
        });
    };

    const askLargeModelStream = (question) => {
        inputValue.value = '';

        const socketTask = uni.connectSocket({
            url: `wss://${wssUrl}/api/ai/askLargeModelStream`,
            header: {
                token: mainStore.token,
                'content-type': 'application/json',
            },
            success: () => {
                console.log('WebSocket连接成功');
            },
            fail: (err) => {
                console.error('WebSocket连接失败:', err);
                Toast('连接失败');
            },
        });

        socketTask.onOpen(() => {
            console.log('WebSocket连接已打开');
            disabled.value = true;
            socketTask.send({
                data: JSON.stringify({
                    question,
                    competencyType: competencyType.value,
                    id: id.value,
                    entranceId: entranceId.value,
                    chooseType: chooseType.value,
                    chatId: chatId.value,
                }),
                success: () => {
                    console.log('消息发送成功');
                },
                fail: (err) => {
                    console.error('消息发送失败:', err);
                    Toast('发送失败');
                },
            });
        });

        let ObjAi = {
            img: imgUrls(mainStore.BaseInfo.chatImg),
            allowclick: true,
            isshow: false,
            state: 1,
            answer: '',
        };
        chatHomeList.value.push(ObjAi);
        socketTask.onMessage((res) => {
            try {
                const data = JSON.parse(res.data);
                if (data.code === 0) {
                    const lastMsg = chatHomeList.value[chatHomeList.value.length - 1];
                    if (data.type === 'result' && data.data && data.data.result) {
                        lastMsg.answer += data.data.result;
                        nextTick(() => {
                            scrollToBottom();
                        });
                    } else if (data.type === 'resultSum') {
                        // console.log('收到结果集:', data);
                    }
                }
            } catch (e) {
                console.error('Parse message error:', e);
            }
        });

        socketTask.onError((err) => {
            console.error('WebSocket错误:', err);
            Toast('连接错误');
        });

        socketTask.onClose(() => {
            disabled.value = false;
            console.log('WebSocket已关闭');
        });

        onUnmounted(() => {
            socketTask.close({
                success: () => {
                    console.log('WebSocket已关闭');
                },
            });
        });
    };

    const sendContent = (event) => {
        if (!event) return;
        inputValue.value = event;
        Send();
    };

    const updateChatBoxHeight = () => {
        if (chatBoxHeight.value) return;

        const query = uni.createSelectorQuery();
        query
            .select('.bottomChat')
            .boundingClientRect((data) => {
                if (data) chatBoxHeight.value = data.height;
            })
            .exec();
    };

    const handleFocus = () => {
        isFocusing.value = true;

        // 移除重复的键盘监听逻辑，只保留状态更新
        if (!isFocusing.value) return;

        // 确保输入框获得焦点时滚动到底部
        nextTick(() => {
            scrollToBottom();
        });
    };

    const handleBlur = () => {
        isFocusing.value = false;
        setTimeout(() => {
            if (isFocusing.value) return;
            mainStore.keyBoardHeight = 0;
            console.log('handleBlur');
            updateChatBoxHeight();
            scrollToBottom(500);
        }, 100);
    };

    const scrollToBottom = (Num = 1000) => {
        const query = uni.createSelectorQuery();
        query
            .selectAll('.List')
            .boundingClientRect((data) => {
                if (data && data.length > 0) {
                    const totalHeight = data.reduce((sum, item) => sum + item.height, 0);
                    scrollTop.value = totalHeight + Num;
                }
            })
            .exec();
    };
    watch(
        () => chatHomeList.value,
        () => {
            nextTick(() => {
                scrollToBottom();
            });
        },
        {
            deep: true,
        }
    );
    const scrollHeight = computed(() => {
        const Height =
            mainStore.windowHeight -
            mainStore.totalHeight -
            chatBoxHeight.value -
            mainStore.keyBoardHeight;
        return ['height:' + parseInt(Height) + 'px'].join(';');
    });

    const chatBoxStyle = computed(() => {
        if (mainStore.keyBoardHeight) {
            return {
                position: 'fixed',
                bottom: `${mainStore.keyBoardHeight}px`,
                left: 0,
                right: 0,
                width: '100%',
                zIndex: 999,
                transform: 'translateZ(0)',
            };
        }

        return {
            paddingBottom: mainStore.safeAreaInsets.bottom + 'px',
            width: '100%',
        };
    });

    const confirmDate = (event) => {
        inputValue.value = tampToDate(event.value, true);
        show.value = false;
        Send();
    };

    const confirmCity = (event) => {
        inputValue.value = event.name;
        visible.value = false;
        Send();
    };

    const single_choice = (Item, Sub, Index) => {
        if (!Item.allowclick || Item.orgQuestion) return;
        Item.allowclick = false;
        inputValue.value = Sub.question;
        Send();
    };

    const configMultiple = (Item) => {
        if (!checkboxValue1.value.length || Item.orgQuestion) return;
        Item.allowclick = false;
        const result = checkboxValue1.value.join('\n');
        inputValue.value = result;
        Send();
    };

    const skipUrl = (item) => {
        if (!item.tourl) return;
        toUrl(item.tourl);
    };

    const cancelDate = (num) => {
        if (num == 5) show.value = false;
        if (num == 6) visible.value = false;
        const chatHomeListCount = chatHomeList.value.length;
        chatHomeList.value[chatHomeListCount - 2].isshow = true;
    };

    const Editpop = (index) => {
        const result = chatHomeList.value[index + 1];
        chatHomeList.value[index].isshow = false;
        resultType(result);
    };

    const resultType = (result) => {
        if (result.type == 5) return (show.value = true);
        if (result.type == 6) return (visible.value = true);
    };

    const Togglelawyer = (Item, Sub) => {
        const Current = chatHomeList.value.findIndex((n) => n.dataId == Item.dataId);
        chatHomeList.value[Current].selectUserId = Sub.userId;
        chatHomeList.value[Current].orderCode = Sub.orderCode;
    };

    const ToggleDrawup = (Item, Sub) => {
        const Current = chatHomeList.value.findIndex((n) => n.dataId == Item.dataId);
        chatHomeList.value[Current].selectUserId = Sub.index;
    };

    const ChoiceDrawup = (Item) => {
        if (Item.selectUserId == 1) return toUrl(`/pages/Aidrafting/Aidrafting`);
        if (Item.selectUserId == 2) {
            const Current = Item.lawyers.findIndex((n) => n.index == Item.selectUserId);
            chatId.value = Item.chatId;
            chooseType.value = false;
            competencyType.value = Item.competencyType;
            inputValue.value = Item.lawyers[Current].question;
            Send();
        }
    };

    const Choicelawyer = (Item) => {
        if (!Item.selectUserId || Item.orgQuestion) return;

        toUrl(
            `/pages/chat/chat?userId=${Item.selectUserId}&daddressSelectorType=${Item.daddressSelectorType}&orderCode=${Item.orderCode}`
        );
    };

    onShareAppMessage(() => {
        return {
            title: mainStore.BaseInfo.shareTitle,
            path: '/pages/index/index',
            imageUrl: mainStore.BaseInfo.shareImage,
            desc: mainStore.BaseInfo.summary,
        };
    });

    onShareTimeline(() => {
        return {
            title: mainStore.BaseInfo.shareTitle,
            query: '/pages/index/index',
            imageUrl: mainStore.BaseInfo.shareImage,
        };
    });
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
    }

    .scrollView {
        width: 100%;
        box-sizing: border-box;

        .List {
            width: 100%;
            display: flex;
            padding: 20rpx 20rpx 0 20rpx;

            .content {
                width: 100%;

                .bgFa {
                    background-color: #fbfbfb !important;
                }

                &_text {
                    display: inline-block;
                    padding: 0 20rpx;
                    background-color: #ffffff;

                    font-size: 28rpx;
                    line-height: 40rpx;
                    margin-top: 20rpx;
                }
            }

            .HeadBox {
                display: flex;
                flex-direction: column;
                align-items: center;

                .Headimgs {
                    width: 88rpx;
                    height: 88rpx;
                    border-radius: 4rpx;
                    overflow: hidden;
                }
            }
        }

        .Left {
            padding-right: 130rpx;
            justify-content: flex-start;

            .content_text {
                border-radius: 0 20rpx 20rpx 20rpx;
                border: 1rpx solid rgba(0, 0, 0, 0.1);

                .answer {
                    color: #333;
                    font-size: 28rpx;
                }

                .single_choice {
                    width: 100%;
                    padding: 14rpx 20rpx;
                    color: $color_008;
                    font-size: 26rpx;
                    background-color: #f7f7f7;
                    margin-bottom: 16rpx;
                    border-radius: 6rpx;
                }

                .Multiple_choice {
                    width: 100%;
                    padding: 4rpx 20rpx;
                    color: $color_008;
                    font-size: 26rpx;
                    background-color: #f7f7f7;
                    margin-bottom: 14rpx;
                    border-radius: 6rpx;

                    ::v-deep .u-checkbox__icon-wrap {
                        flex-shrink: 0 !important;
                    }
                }

                .Nochoice {
                    ::v-deep .u-checkbox__icon-wrap {
                        display: none !important;
                    }
                }

                .configBtn {
                    width: 100%;
                    height: 70rpx;
                    background-color: #f7f7f7;
                    color: #999;
                    font-size: 30rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 10rpx;
                    margin-top: 20rpx;
                }

                .active {
                    background-color: $color_008 !important;
                    color: #fff !important;
                }
            }

            .tipTxt {
                color: #9a9ea2;
                font-size: 20rpx;
            }

            .soundImg {
                width: 28rpx;
                height: 24rpx;
                margin-left: 4rpx;
            }

            .content {
                margin-left: 20rpx;

                .paper {
                    background-color: #fff;
                    padding: 20rpx 40rpx 20rpx 20rpx;
                    border-radius: 0 20rpx 20rpx 20rpx;
                    border: 1rpx solid rgba(0, 0, 0, 0.1);

                    .fileImg {
                        width: 80rpx;
                        height: 80rpx;
                    }

                    .fileName {
                        color: #000;
                        font-size: 26rpx;
                        padding-left: 20rpx;
                    }
                }
            }
        }

        // 跳转
        .skip {
            width: 80%;
            background-color: #fff;
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            padding: 30rpx 24rpx;
            border-radius: 0 20rpx 20rpx 20rpx;

            .nameTitle {
                color: #000;
                font-size: 28rpx;
                flex: 1;
            }
        }

        .Findlawyer {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-bottom: 20rpx;

            .list {
                width: 100%;
                background-color: #f7f7f7;
                padding: 16rpx 20rpx;
                border-radius: 10rpx;
                margin-bottom: 20rpx;
                display: flex;
                align-items: center;

                .headImg {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    margin-right: 14rpx;
                }

                .content {
                    width: 240rpx;
                    flex: 1;
                    display: flex;
                    align-items: center;

                    .Name {
                        color: #000;
                        font-size: 30rpx;
                    }

                    .desc {
                        color: #9a9ea2;
                        font-size: 24rpx;
                        margin-left: 20rpx;
                    }
                }

                .seleBox {
                    width: 42rpx;
                    height: 42rpx;
                    border-radius: 50%;
                    border: 1px solid #e1e1e1;
                    margin-left: 10rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;

                    .icon-xuanzhong {
                        color: #f7f7f7;
                        font-size: 32rpx;
                    }
                }
            }

            .Active {
                .seleBox {
                    background-color: #13c643;
                    border: 1px solid #13c643;

                    .icon-xuanzhong {
                        color: #fff;
                    }
                }
            }
        }

        .Drawup {
            .list {
                padding: 16rpx 20rpx 16rpx 10rpx;
            }
        }

        .Right {
            padding-left: 130rpx;
            justify-content: flex-end;

            .content {
                margin-right: 20rpx;
                display: flex;
                flex-direction: column;
                align-items: flex-end;

                .content_text {
                    color: #fff;
                    border-radius: 20rpx 0 20rpx 20rpx;
                    padding: 14rpx 20rpx;
                    background-color: v-bind('mainStore.color');
                }

                .Edit_error {
                    display: flex;
                    align-items: center;
                    padding-top: 10rpx;

                    .discern {
                        color: #9a9ea2;
                        font-size: 20rpx;
                    }

                    .Edit {
                        color: v-bind('mainStore.color');
                        font-size: 20rpx;
                    }
                }
            }
        }
    }

    .bottomChat {
        width: 100%;

        .chatBot {
            width: 100%;
            padding: 20rpx;
            box-sizing: border-box;
            // background-color: #ffffff;

            .chatBor {
                width: 100%;
                height: 140rpx;
                display: flex;
                align-items: center;
                position: relative;
                background-color: #ffffff;
                border: 1px solid #99adff;
                border-radius: 20rpx;
                padding: 20rpx;
                box-sizing: border-box;

                .textarea {
                    flex: 1;
                    padding: 0rpx 0;
                    height: 100%;
                    color: #000;
                    font-size: 28rpx;
                    padding-right: 20rpx;
                    box-sizing: border-box;
                }

                .send {
                    width: 56rpx;
                    height: 56rpx;
                    flex-shrink: 0;
                }
            }
        }
    }
</style>
